<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <div class="login_form">
                    <el-form ref="login_ref" :model="loginForm" :rules="rules">
                        <el-form-item>

                        </el-form-item>
                        <el-form-item prop="username">
                            <el-input v-model="loginForm.phone" type="text" placeholder="请输入账号" prefix-icon="Iphone"
                                clearable />
                        </el-form-item>
                        <el-form-item style="margin-bottom: 5px;" prop="password">
                            <el-input v-model="loginForm.loginPass" type="password" placeholder="请输入密码"
                                prefix-icon="Lock" clearable show-password />
                        </el-form-item>
                    </el-form>

                    <el-button :loading="loading" @click="login" style="margin-top: 20px; width:100%" type="primary"
                        icon="User">登录</el-button>

                </div>
            </el-col>
        </el-row>


    </div>
</template>
<script setup lang="ts">
import { reactive, ref, } from 'vue'
import { ElNotification } from "element-plus";
//@ts-ignore
import { reqLogin } from '@/api/login/index.ts'
//@ts-ignore
import userStore from '@/store/user.ts'
const $userStore = userStore()
import { useRoute, useRouter } from 'vue-router';
const $useRouter = useRouter()
const $useRoute = useRoute()
const loginForm = reactive({
    phone: '18980887490',
    loginPass: '887490',
    companyNum: '8112010001',
    childSys: '',
});
const login_ref = ref()
// 加载效果
const loading = ref(false);
const login = async () => {

    try {
        await login_ref.value.validate();
    } catch {
        return console.log("密码账号格式不对");
    }
    loading.value = true;
    reqLogin(loginForm).then((res: any) => {
        if (res.code == 1) {
            $userStore.token = res.data.token
            $userStore.image = ''
            $userStore.sex = ''
            $userStore.user = res.data.luser.realName
            ElNotification.success({
                title: `HI,您好`,
                message: "欢迎回来",
            });
            loading.value = false;
            let redirect: any = $useRoute.query.redirect;
            $useRouter.push({
                path: redirect || "/",
            });
        } else {
            ElNotification.error({
                title: "error",
                message: res.data.msg,
            });
            loading.value = false;
        }
    })
};

// 定义表单校验的规则
const rules: any = reactive({
    phone: [
        { required: true, message: "用户名不能为空", trigger: "blur" },
        { min: 3, max: 12, message: "账号长度错误", trigger: "blur" },
    ],
    loginPass: [
        { required: true, message: "密码不能为空", trigger: "blur" },
        { min: 3, max: 18, message: "密码长度错误", trigger: "blur" },
    ],
});
</script>
<style scoped lang='scss'>
.login_container {
    width: 100%;
    height: 100vh;
    background-image: url('@/assets/images/login-bg.jpg');
    background-size: cover;

    .login_form {
        position: relative;
        width: 45%;
        top: 35vh;
        left: 5vw;
        padding: 40px 40px 20px 40px;
        border-radius: 10px;
        background-color: #fff;
    }
}
</style>
